<template>
  <div class="login-container" @keyup.enter="submitForm">
    <div class="login-left">
      <div class="login-bg">
        <img src="../assets/img/login_theme.png" alt="logo">
        <p>智能监控整体解决方案提供商</p>
        <p>为客户创造价值，为社会创造效益，为员工创造机会，为企业创造愿景</p>
      </div>
      <p class="login-copyright">
        Copyright 2006-2017 深圳市爱科赛科技股份有限公司 版权所有 粤ICP备12090658号
      </p>
    </div>
    <div class="login-right">
      <form class="login-form">
        <p><img class="login-logo" src="../assets/img/login_logo.png" alt=""></p>
        <p class="login-title">医院能耗管理系统配置后台</p>
        <div class="form-group">
          <label for="username" class="login-label">用户名
            <input type="text" id="username" class="form-control login-input" :class="{'border-red':nameErr&&showErr}" name="username" v-model="username" placeholder="用户名" maxlength="20" @focus="showErr=false">
            <transition name="show-hint"><span class="login-hint" v-show="nameErr&&showErr">{{nameErr}}</span></transition>
          </label>
        </div>
        <div class="form-group">
          <label for="userpass" class="login-label">密码
            <input type="password" id="userpass" class="form-control login-input" :class="{'border-red':pwdErr&&showErr}" name="userpass" v-model="password" placeholder="密码" maxlength="20" @focus="showErr=false">
            <transition name="show-hint"><span class="login-hint" v-show="pwdErr&&showErr">{{pwdErr}}</span></transition>
          </label>
        </div>
        <button type="button" id="login" class="login-btn" @click="submitForm">登 录</button>
        <p>
          <a href="http://www.excesys.com.cn/about.asp?Title=1" target="_blank">关于爱科赛</a> |
          <a href="http://www.excesys.com.cn/contact.asp" target="_blank">联系我们</a>
        </p>
      </form>
    </div>
  </div>
</template>
<script>
  import md5 from "md5"
  export default {
    name: 'login',
    data () {
      return {
        username: '18681488080',
        password: '',
        showErr: false,
        returnErr: ""
      }
    },
    computed: {
      nameErr () {
        let err = ''
        if(!this.username.length) {
          err = '你还没输入用户名喲'
        }
        else if(this.username.length < 2) {
          debugger
          err = '用户名不能小于2位'
        }
        return err
      },
      pwdErr () {
        let err = ''
        if(!this.password.length) {
          err = '你还没输入密码喲'
        }
        else if(this.password.length < 6 || this.password.length > 16) {
          err = '密码位数为6-16位'
        }
        else if(!/^[0-9a-zA-Z]{6,16}$/.test(this.password)) {
          err = '只能包含数字或英文字母'
        }
        else if(this.returnErr) {
          err = this.returnErr
        }
        return err
      },
      nameInvalid () {
        return !this.namePristine && (!this.username || this.username && this.username.length < 2)
      },
      pwdInvalid () {
        return !this.pwdPristine && (this.returnErr || !this.password || this.password && this.password.length < 6)
      }
    },
    methods: {
      submitForm () {
        if (this.nameErr || this.pwdErr) {
          this.showErr = true
          return
        }
        this.$ajax.post('http://39.108.179.28:8080/powerManageApi/api/AccountAPI/login',
          `clerkID=${this.username}&password=${md5(this.password)}`
        ).then(res => {
          if(res.data.code == 1){
            localStorage.setItem("the_token",res.data.result.token)
            localStorage.setItem("the_userName",res.data.result.clerkName)
            localStorage.setItem("the_clerkID",res.data.result.clerkID)
            localStorage.setItem("the_weChatNo",res.data.result.weChatNo)
            this.$router.push({ path: '/home'})
          }else {
            this.returnErr = res.data.msg
            this.showErr = true
          }
        }).catch(err => {
          this.$router.push({ path: '/home'})
          this.returnErr = "服务器错误,请联系管理员";
          this.showErr = true
        })
      }
    },
    watch: {
      password (newVal,oldVal) {
        if(newVal !== oldVal) this.returnErr = ''
      },
      username (newVal,oldVal) {
        if(newVal !== oldVal) this.returnErr = ''
      }
    }
  }
</script>
<style scoped>
  .login-container {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
  }
  .login-left {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: url("../assets/img/login_bg.png") -1px 0;
    background-size: 100% 100%;
  }
  .login-bg {
    width: 450px;
    margin: 0 auto;
  }
  .login-bg>img {
    width: 400px;
  }
  .login-bg>p:first-of-type {
    margin-top: 30px;
    color: #ffffff;
    text-align: left;
    font-size: 22px;
  }
  .login-bg>p:last-of-type {
    margin-top: 15px;
    margin-left: -18px;
    color: #cccccc;
    font-size: 14px;
  }
  .login-copyright {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    color: #cccccc;
    text-align: center;
  }
  .login-right {
    flex: 1;
    max-width: 600px;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .login-right>p {
    flex-basis: 60px;
    padding-top: 30px;
    text-align: center;
  }
  .login-form {
    width: 50%;
    max-width: 270px;
  }
  .login-form>p:not(:last-child) {
    text-align: left;
  }
  .login-form>p:last-child {
    margin-top: 50px;
  }
  .login-form>p>a {
    color: #666666;
    margin: 0 10px;
  }
  .login-logo {
    width: 64px;
    height: 64px;
  }
  .login-title {
    font-weight: bold;
    font-size: 16px;
    margin-top: 15px;
    margin-bottom: 60px;
  }
  .login-btn{
    width: 100%;
    background:#03997f;
    color:#fff;
    font-size: 16px;
    margin-top:20px;
    padding: 10px;
    border-radius: 4px;
    border:none;
  }
  .login-label {
    display: block;
    text-align: left;
    color: #666666;
    margin-top: 20px;
    position: relative;
  }
  .login-input{
    border-width: 0 0 1px 0;
    padding-left: 0;
    margin-top: 5px;
    box-shadow: 0 0 0 20px #ffffff inset;
    border-radius: 0;
  }
  .login-hint{
    color: #ef6487;
    font-size: 14px;
    position: absolute;
    bottom: 5px;
    right: 0;
  }
  .show-hint-enter-active, .show-hint-leave-active {
    transition: all .5s ease-in;
    opacity: 1;
  }
  .show-hint-enter, .show-hint-leave-active {
    transform: translate3d(30px,0, 0);
    opacity: 0;
  }
  .border-red{
    border-bottom: 1px solid #f00
  }
  @media screen and (max-width: 767px){
    .login-left {
      display: none;
    }
    .login-form {
      width: 100%;
    }
    .login-form>p:not(:last-child) {
      text-align: center;
    }
  }
</style>
